@import 'styles/ui.module';
@import 'styles/settings';
@import 'styles/typography-extends';

.wrapper {
  padding: $sidebar-paddings 0 24px;
}

.titleSection {
  display: flex;
  padding: 0 $mobile-sidebar-side-paddings;

  @media #{$tablet-portrait} {
    padding: 0 $sidebar-paddings;
  }
}

.widgetTitle {
  @extend %title;
  color: $white;
  line-height: 20px;
  margin-top: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.widgetSubTitle {
  @extend .widgetTitle;
  padding-left: calc(2 * #{$mobile-sidebar-side-paddings});

  @media #{$tablet-portrait} {
    padding-left: calc(2 * #{$sidebar-paddings});
  }
}

.widgetWrapper {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.description {
  color: $alto;
  @extend %annotation;
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0 $mobile-sidebar-side-paddings;

  @media #{$tablet-portrait} {
    padding: 0 $sidebar-paddings;
  }
}

.fineScaleWrapper {
  @include backdropBlur($colour: rgba(2,114,186,0.1), $fallback: #003252, $fallbackOpacity: 0.6);
  padding: $sidebar-paddings 0;
  padding-bottom: 24px;
}

.subcategoryRadioContainer label {
  padding-left: calc(2 * #{$mobile-sidebar-side-paddings});

  @media #{$tablet-portrait} {
    padding-left: calc(2 * #{$sidebar-paddings});
  }
}